<template>
    <div class="main-left">
      <div class="top">
        <div style="overflow:hidden;">
          <div class="top-left t1">{{topContent.lessonName}}</div>
          <div class="top-right t2">进度{{topContent.finishedRate}}</div>
        </div>
        <div style="clear:both;overflow:hidden;margin-top: 10px">
          <div class="top-left t3">共{{topContent.catalogNum}}章节 {{topContent.trainingNum}}个任务</div>
          <div class="top-right t3">领先{{topContent.leadRate}}%点学生</div>
        </div>
      </div>
      <div class="tree-list">
        <el-tree
        ref="tree"
        :highlight-current="true"
        :data="list"
        node-key="id"
        :default-expanded-keys="[]"
        :props="treeProps"
        icon-class="el-icon-arrow-right"
      >
        <span slot-scope="{ node, data}" class="tree-node">
          <div @click.stop="clickItem(data)" :class="{'file-label': true,'ellipsis': true}">
            {{ node.label }}
          </div>
          <div class="tree-btns" v-if="!data.hasChildren && isBtn">
            <el-button type="primary" size="mini" plain @click.stop="() => viewNode(data, 1)">学习 </el-button>
             <el-button type="primary" size="mini" plain @click.stop="() => viewNode(data, 2)">测验</el-button>
              <el-button type="primary" size="mini" plain @click.stop="() => viewNode(data, 3)">统计</el-button>
          </div>
        </span>
      </el-tree>
      </div>
    </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    // 节点列表
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 节点 props
    treeProps: {
      type: Object,
      default: () => {
        return {
          children: 'childrens',
          label: 'chapterName'
        }
      }
    },
    // 顶部信息
    topContent: {
      type: Object,
      default: () => {
        return {
          lessonName: '课程名称', // 课程名称
          finishedRate: '10/ 100', // 进度
          catalogNum: '10', // 章节数
          leadRate: '10', // 领先度
          trainingNum: '10' // 任务总数
        }
      }
    },
    // 是否显示操作按钮 未显示操作按钮 点击最低级（最后一个子级）触发点击事件
    isBtn: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 未显示操作按钮 点击最低级（最后一个子级）触发点击事件
    clickItem (data) {
      if (this.isBtn) {
        return false
      }
      if (!data.hasChildren) {
        this.$emit('clickItem', data)
      }
    },
    viewNode (data, type) {
      // type 1 学习 2 测验 3 统计
      // console.log('viewNode====>', data)
      this.$emit('viewNode', type, data)
    }
  }
}
</script>
<style scoped lang="scss">
  .main-left {
    width: 100%;
    height: 100%;
    overflow: hidden;
    float: left;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    .top {
      height: 73px;
      background: rgba(90, 120, 166, 1);
      border-radius: 5px 5px 0px 0px;
      padding: 10px 20px 12px 20px;
      box-sizing: border-box;
      .top-left {
        float: left;
      }
      .t1 {
        font-size: 22px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      .t2 {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin-top: 6px;
      }
      .t3 {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      .top-right {
        float: right;
      }
    }
  }
  .tree-list {
    overflow: auto;
    .tree-node {
      width: 90%;
      .file-label {
        display: inline-block;
        height: 44px;
        line-height: 44px;
        &.ellipsis {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .tree-btns {
        padding-bottom: 10px;
        width: 100%;
        text-align: right;
      }
    }
    ::v-deep .el-tree-node__content {
      height: fit-content;
      border-bottom:1px solid rgba(229,229,229,1);
    }
  }
</style>
